import React ,{useState ,useEffect} from 'react';
import { DatePicker, Space ,Pagination } from 'antd';
import { Button, Modal } from 'antd';
import style from './ServiceManagement.module.scss'
import {serviceApi ,delApi} from '../../http/serviceApi'
import {useNavigate} from "react-router-dom";

const { RangePicker } = DatePicker;
function ServiceManagement(props) {

    //定义弹窗对话框
    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('敏感操作，请确认是否删除内容');
    const [delId,setDelId] = useState('')
    const showModal = (id) => {
        //判断有没有选中，控制打开模态框
        if(id || list.some(item=>item.isCheck)){
            setVisible(true);
            setDelId(id)
        }
    };

    const handleOk = () => {
        setModalText('敏感操作，请确认是否删除内容');
        setConfirmLoading(true);
        if(!delId){
            list.forEach(item=>{
                if(item.isCheck){
                    del(item.id)
                }
            })
        }else {
            del(delId)
        }

        setVisible(false);
        setConfirmLoading(false);

    };

    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    };




    const navigate = useNavigate()
    const initState = {
        classification:'全部订单',
        startTime:'',
        endTime:'',
        num:'',
        current:1,
        pageSize:10,
        total:100
    }
    const initList = [{
        id:'',
        isCheck:false,//是否选中
        code:'',//项目编码
        img:'',//项目主图
        name:'',//项目名称
        time:'',//项目时长
        money:"",//项目金额
        state:'',//状态
    }]
    const [state , setState] = useState(initState)
    const [list , setList] = useState(initList)
    const changeInput =(e)=>{
        setState({
            ...state,[e.target.name]:e.target.value
        })
    }
    //选择状态
    const changCurrent =(num)=>{
        console.log(num)
        if(num!=state.current){
            setState({
                ...state,current: num
            })
            initListFc(state)
        }

    }


    //定义列表渲染函数
    const initListFc = (state)=>{
        serviceApi(state)
            .then(res=>{
                setList(res.data.data.map((item)=> {
                    item.isCheck = false
                    return item
                }))
            })
    }
    //删除
    const del = (id)=>{

        delApi(id)
            .then(()=>{
                initListFc(state)
            })
    }

    //页面列表渲染
    const listDate = list.map(item=><tr key={item.id}>
        <td  className={style.check}>
            <div className={style.check_btn} onClick={()=>checkHandler(item.id)} style={{backgroundColor:item.isCheck?'#169bd5':''}}></div>
        </td>
        <td  className={style.langNum_box}>{item.code}</td>
        <td className={style.langNum_box}>{item.img}</td>
        <td className={style.num}>{item.name}</td>
        <td className={style.num}>{item.time}</td>
        <td className={style.num}>{item.money}</td>
        <td className={style.num}>{item.state}</td>
        <td className={style.operation}>
            <div onClick={(e)=>clickHandler(e,item.id)}>详情</div>
            <div onClick={(e)=>clickHandler(e,item.id)}>编辑</div>
            <div  onClick={()=>showModal(item.id)}>删除</div>
        </td>
    </tr>)
    //点击输入框选中
    const checkHandler = (id)=>{
        setList(list.map((item)=>{
            if(item.id ==id){
                item.isCheck=!item.isCheck
            }
            return item
        }))
    }
    //点击全选反选
    const allCheckHandler = () =>{
        list.map(item=>item.isCheck=!item.isCheck)
    }
    //页面加载时渲染
    useEffect(()=>{
        initListFc(state)
    },[])
    //开始搜索
    const submitHanlder = ()=>{
        initListFc(state)
    }
    //点击新增
    const exportHanlder = ()=>{
        navigate('/finance/addOrEdit')
    }
    //点击详情和编辑
    const clickHandler=(e,id)=>{
        console.log(e.target.value)
        if(e.target.innerText == '详情'){
            navigate('/finance/detailed?type=details&id='+id)
        }else if(e.target.innerText == '编辑') {
            navigate('/finance/addOrEdit?id='+id)
        }
    }
    //改变分页大小
    const pageSizeSet=(current, size)=>{
        setState({
            ...state,current,pageSize:size
        })
        initListFc(state)
    }
    return (
        <div>
            <Modal
                title="提示"
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                okText="确认删除"
                cancelText="取消"

                onCancel={handleCancel}
            >
                <p>{modalText}</p>
            </Modal>
            <div className={style.header}>服务管理</div>
            <div className={style.find}>
                <div className={style.find_left}>
                        <div className={state.current==1?style.left_on:''} onClick={()=>changCurrent(1)}>全部</div>
                        <div className={state.current==2?style.left_on:''} onClick={()=>changCurrent(2)}>上架中</div>
                        <div className={state.current==3?style.left_on:''} onClick={()=>changCurrent(3)}>未上架</div>
                </div>
                <div className={style.find_right}>
                    <div className={style.input_box}>
                        <input placeholder='输入项目名称'  name="num" className={style.input} onChange={(e)=>changeInput(e)}/>
                    </div>
                    <div className={style.check_btn} onClick={submitHanlder}>查询</div>
                    <div className={style.export_btn} onClick={exportHanlder}>新增项目</div>
                    <div className={style.export_btn} onClick={()=>showModal(null)} >删除</div>
                </div>
            </div>
            <div className={style.table_box}>
                <table className={style.table}>
                    <thead>
                    <tr>
                        <th className={style.check}>
                            <div className={style.check_box}  style={{backgroundColor:list.every(item=>item.isCheck==true)?'#169bd5':''}} onClick={allCheckHandler}></div>全选
                        </th>
                        <th className={style.langNum_box}>项目编码</th>
                        <th className={style.langNum_box}>项目主图</th>
                        <th className={style.num}>项目名称</th>
                        <th className={style.num}>项目时长</th>
                        <th className={style.num}>项目金额</th>
                        <th className={style.num}>状态</th>
                        <th className={style.operation}>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {listDate}
                    </tbody>

                </table>
                <div className={style.pageSize}>
                    <Pagination defaultCurrent={state.current} total={state.total} pageSize={state.pageSize} onChange={pageSizeSet} onShowSizeChange={pageSizeSet}/>
                </div>
            </div>

        </div>
    );
}

export default ServiceManagement;